import React from 'react';
import { Form, Input, Button, Card, Checkbox } from 'antd';
import styled from '@emotion/styled';
import logo from 'assets/img/logo.png';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { UserFrom } from "type/user"
import { useAuth } from "context/auth-context"
export default function UnAuthPage() {
  const { login } = useAuth()

  const handleSubmit = (values: UserFrom) => {
    login(values)
  };

  const tailLayout = {
    wrapperCol: { offset: 0, span: 8 },
  };

  const layout = {
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
  };

  return (
    <Container>
      <Header/>
      <Background />
      <ShadowCard>
        <p className="title">平台登录</p>
        <Form
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={handleSubmit}
        >
          <Form.Item
            label="账户名"
            name="loginName"
            rules={[{ required: true, message: '账户名不能为空!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入账号名" />
          </Form.Item>

          <Form.Item
            label="登录密码"
            name="password"
            rules={[{ required: true, message: '密码不能为空!' }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入登录密码"
            />
          </Form.Item>
          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox>自动登录</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ width: '100%' }}
              htmlType="submit"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </ShadowCard>
    </Container>
  );
}

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
  background-position: center 110px;
  background-size: 100%;
`;

const Header = styled.header`
  background: url(${logo}) no-repeat left;
  background-position: 40px;
  padding: 5rem 0;
  background-size: 16rem;
  width: 100%;
`;

const ShadowCard = styled(Card)`
  margin-top: 100px;
  width: 400px;
  min-height: 380px;
  padding: 32px 40px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 10px 20px 0px rgba(0, 21, 41, 0.05);
  border-radius: 4px;
  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
  }
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
`;
